<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.global.js"></script>
  <link rel="stylesheet" href="./index.css" />
  <link rel="stylesheet" href="./table.css" />
  <link rel="stylesheet" href="./gongzi.css" />
  <script src="./index.full.js"></script>

  <script>
    //适配代码
    (function (doc, win) {
      var docEI = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientataionchange' : 'resize',
        recalc = function () {
          var clientWidth = docEI.clientWidth;
          if (!clientWidth) return;
          //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
          docEI.style.fontSize = 100 * (clientWidth / 1536) + 'px';
        }

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  </script>
</head>

<body>
  <div id="app">
    <div class="container">
      <div class="top-content">
        <h2 class="top-title">中国水利水电第十四工程局有限公司引江补汉工程土建施工及金结机电安装8标项目经理部进场人员信息登记表</h2>
      </div>

      <!-- 人员信息登记表 -->
      <div class="table-content">
        <div class="table-form">
          <el-form ref="dataForm" :model="peopleForm" label-width="118px" class="dataForm">
            <el-row>
              <el-col :span="20">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="姓名" prop="memberId" class="formItemDuty" style="border-top: 0px;">
                      <el-input v-model="peopleForm.name" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别" prop="sex" class="formItemDuty" style="border-top: 0px;">
                      <el-input v-model="peopleForm.sex" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="民族" prop="nation" class="formItemDuty">
                      <el-input v-model="peopleForm.nation" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="婚姻状况" prop="marriage" class="formItemDuty">
                      <el-input v-model="peopleForm.marriage" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="出生日期" prop="birthday" class="formItemDuty">
                      <el-input v-model="peopleForm.birthday" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="籍    贯" prop="native" class="formItemDuty">
                      <el-input v-model="peopleForm.native" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="进场日期" prop="enterTime" class="formItemDuty">
                      <el-input v-model="peopleForm.enterTime" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所在单位" prop="unit" class="formItemDuty">
                      <el-input v-model="peopleForm.unit" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <div class="imgBox">
                  <img class="imgInner" style="height: 124px;" src="peopleForm.enterImgUrl" alt="">
                  <!-- <img class="img-inner" style="height: 1.25rem;" src="https://ts1.cn.mm.bing.net/th/id/R-C.23034dbcaded6ab4169b9514f76f51b5?rik=mSGADwV9o%2fteUA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f40%2f9640_1.jpg&ehk=RYei4n5qyNCPVysJmE2a3WhxSOXqGQMGJcvWBmFyfdg%3d&risl=&pid=ImgRaw&r=0" alt=""> -->
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="班组" prop="group" class="formItemDuty">
                      <el-input v-model="peopleForm.group" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工种及持证" prop="workType" class="formItemDuty">
                      <el-input v-model="peopleForm.workType" class="formItemDutyIn borR0" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所在宿舍" prop="dorm" class="formItemDuty">
                      <el-input v-model="peopleForm.dorm" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系方式" prop="phone" class="formItemDuty">
                      <el-input v-model="peopleForm.phone" class="formItemDutyIn borR0" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="身份证号" prop="idNumber" class="formItemDuty">
                      <el-input v-model="peopleForm.idNumber" class="formItemDutyIn borR0" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="家庭住址" prop="address" class="formItemDuty">
                      <el-input v-model="peopleForm.address" class="formItemDutyIn borR0" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <div class="tabRowItem">
                <div class="itemLeft">家庭主要（紧急）<br />联系方式</div>
                <div class="itemRight">
                  <el-row>
                    <el-col :span="5" class="tabLabelTit">关 系</el-col>
                    <el-col :span="5" class="tabLabelTit">姓 名</el-col>
                    <el-col :span="6" class="tabLabelTit">联系方式</el-col>
                    <el-col :span="8" class="tabLabelTit borR0">备 注</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5">
                      <el-input v-model="peopleForm.relation" class="formItemDutyIn borL0" />
                    </el-col>
                    <el-col :span="5">
                      <el-input v-model="peopleForm.fName" class="formItemDutyIn borL0" />
                    </el-col>
                    <el-col :span="6">
                      <el-input v-model="peopleForm.fPhone" class="formItemDutyIn borL0" />
                    </el-col>
                    <el-col :span="8">
                      <el-input v-model="peopleForm.fRemark" class="formItemDutyIn borL0 borR0" />
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-row>
            <el-row style="border-bottom: 1px solid;">
              <div class="tabRowItem">
                <div class="itemLeft">个人工作经验<br />（何时何地从事<br />过何种工种）</div>
                <div class="itemRight">
                  <el-input v-model="peopleForm.workExperience" type="textarea" class="formItemDutyIn borL0 borR0" :autosize="{ minRows: 3 }" />
                </div>
              </div>
            </el-row>
            <el-row style="height: 2.4rem;border-bottom: 1px solid #000;">
              <el-col :span="12" style="border-right: 1px solid #000;">
                <div class="imgBox">
                  <img class="imgInner" style="height: 2.2rem;" src="peopleForm.idCardFront" alt="">
                </div>
              </el-col>
              <el-col :span="12">
                <div class="imgBox">
                  <img class="imgInner" style="height: 2.2rem;" src="peopleForm.idCardVerso" alt="">
                </div>
              </el-col>
            </el-row>
            <el-row style="height: 2.4rem;">
              <el-col :span="12" style="border-right: 1px solid #000;">
                <div class="imgBox">
                  <img class="imgInner" style="height: 2.2rem;" src="peopleForm.salaryFront" alt="">
                </div>
              </el-col>
              <el-col :span="12">
                <div class="imgBox">
                  <img class="imgInner" style="height: 2.2rem;" src="peopleForm.salaryVerso" alt="">
                </div>
              </el-col>
            </el-row>
          </el-form>
          <div class="form-bottom bot-f">
            <div class="bottom-item">
              进场人员签字:<span style="color: red;font-size: 13px;">（签字+按手印）</span><el-input v-model="peopleForm.signature"
                class="people-input" placeholder=" "></el-input> </div>
            <div class="bottom-item">
              日期:<span style="color: red;font-size: 13px;">（与三级教育时间一致）</span><el-input v-model="peopleForm.sdate" class="people-input"
                placeholder=" "></el-input> </div>
          </div>
          <!-- <dov class="bottomBox">
            <div class="bItem"></div>
          </dov> -->
        </div>

      </div>
    </div>
  </div>

  </div>
  <script>
    const {
      createApp,
      reactive,
      toRefs
    } = Vue;
    const vue3Composition = {
      setup() {
        const topForm = reactive({
          number: "",
          company: "",
          name: '',
          job: "喷浆"
        })

        const peopleForm = reactive({
          name: "",
          sex: "",
          age: "",
          nation: "",
          marriage: "",
          birthday: "",
          native: "",
          enterTime: "",
          unit: "",
          enterImgUrl: "",
          group: "",
          workType: "",
          dorm: "",
          phone: "",
          idNumber: "",
          relation: "",
          fRelation: "",
          fName: "",
          fPhone: "",
          fRemark: "",
          workExperience: "",
          idCardFront: "",
          idCardVerso: "",
          salaryFront: "",
          salaryVerso: "",
          signature: "",
          sdate: "",
          day: "",
        })


        return {
          topForm,
          peopleForm,
        }
      }

    }
    const app = createApp(vue3Composition).use(ElementPlus).mount('#app');
  </script>
</body>
<style>
  * {
    /* margin: 0;
    padding: 0; */
    font-size: 0.15rem;
  }

  .top-content {
    text-align: center;
  }

  .top-img {
    display: block;
    width: 1.5rem;
    margin: auto;
  }

  .top-title {
    width: 60%;
    line-height: 0.42rem;
    font-size: 0.26rem;
    word-spacing: 10px;
    margin: 0.5rem auto 0 auto;
  }

  .top-text {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top-input {
    width: 200px;
  }

  .top-input .el-input__wrapper {
    box-shadow: none;
    border-bottom: 1px solid #333;
    border-radius: 0;
    text-align: center;
  }

  .top-input .el-input__inner {
    text-align: center;
  }

  .top-text span {
    display: inline-block;
    font-size: 0.22rem;
    width: 1rem;
    text-align: justify;
    text-align-last: justify;
  }

  .top-company {
    font-size: 0.2rem;
    word-spacing: 10px;
  }

  .table-content {
    margin-top: 0.2rem;
  }

  .bot-f {
    flex-direction: column;
    align-items: flex-end;
  }

  .bottom-item {
    width: 4rem;
    font-size: 13px;
  }
</style>

</html>